import React, { Component } from 'react'

export default class CommentHeader extends Component {
  state = {
    content: '',
  }

  onChange = (e) => {
    if (e.target.value.length > 100) return
    this.setState({ content: e.target.value })
  }

  onPost = () => {
    const { content } = this.state
    if (content.length < 0) return alert('不能为空')
    this.props.onAddComment(content)
    this.setState({ content: '' })
  }

  render() {
    const { content } = this.state
    return (
      <>
        <h3 className="comm-head">评论</h3>
        <div className="comm-input">
          <textarea
            value={content}
            onChange={this.onChange}
            placeholder="爱发评论的人，运气都很棒"
          ></textarea>
          <div className="foot">
            <div className="word">{content.length}/100</div>
            <div className="btn" onClick={this.onPost}>
              发表评论
            </div>
          </div>
        </div>
      </>
    )
  }
}
